<template>
  <div class="call-label" id="callTable">
    <div style="padding: 0 20px 30px;">
      <div class="title" :title="$t('channelsettings.webchatLabel13')">
        {{$t('channelsettings.webchatLabel13')}}
      </div>
      <div class="operate-div">
        <div class="left">
          <span @click.stop="add" class="add"><i class="el-icon-plus"></i>{{$t('config.channel.addLabel')}}</span>
          <span @click.stop="refresh" style="padding-right: 10px; cursor: pointer"><i class="iconfont icon-shuaxin"></i>{{$t('public.refresh')}}</span>
        </div>
        <el-input
          :placeholder="$t('config.channel.inpputWar')"
          class="condition right"
          v-model="searchContent"
          size="mini"
          @change="handleIconClick"
          @keyup.native.enter="handleIconClick"
        >
          <i
            class="el-input__icon el-icon-search"
            slot="suffix"
            @click="handleIconClick">
          </i>
        </el-input>
      </div>
      <call-label-tree ref="tree" v-if="tableLoading" :tableData="tableData" :vagueStr = 'searchContent' @emptyStr = 'emptyStr' @filterEnableUpdate = 'filterEnableUpdate' @refreshData = "refreshData" :filterEnable = 'filterEnable'></call-label-tree>
    </div>
  </div>
</template>
<script>
  import callLabelTree from '@/components/business-modules/config/channelConfig/base/knowledegBaseTree.vue'
  export default {
    name: 'knowledgeBaseLabel',
    data () {
      return {
        tableLoading: true,
        tableData: [],
        searchLabelName: '',
        searchContent: '',
        filterEnable: 'open'
      }
    },
    methods: {
      filterEnableUpdate (state) {
        this.filterEnable = state
      },
      emptyStr () {
        this.searchContent = ''
      },
      refreshData () {
        this.refresh()
      },
      saveLabel () {
        this.$refs.tree.handlesaveTreeLabel()
      },
      handleIconClick () {
        this.$refs.tree.forceUpdate(this.searchContent);
      },
      add () {
        this.$refs.tree.handleAddLabeltest()
      },
      refresh () {
        this.searchContent = ''
        this.filterEnable = 'open'
        this.tableData = []
        this.fetchData()
      },
      fetchData () {
        this.tableLoading = false
        let query = {
          name: this.searchContent
        }
        this.$store.dispatch('queryKmTags', query).then((resp) => {
          if (resp.list) {
            this.tableData = resp.list;
            this.tableLoading = true
          }
        })
      }
    },
    components: {
      callLabelTree
    },
    beforeMount () {
    },
    mounted () {
      this.fetchData()
    }
  }
</script>
<style lang="stylus" scoped>
   @import "../../../../assets/common.styl"
  .state
    margin-left: 20px
  .call-label
    overflow-y: auto
    height: calc(100vh - 100px);
    padding-bottom: 40px
    .title
      color $c-prompt
      height 30px
      line-height 30px
      padding 3px 10px
      overflow hidden
      text-overflow ellipsis
      max-width 100%
      white-space nowrap
      cursor pointer
    .operate-div
      display flex
      align-items center
      height 30px
      padding 10px 10px 5px
      border 1px solid #E7E7EB
      border-bottom none
      .left
        /*float left*/
        /*padding-top 5px*/
        .add
          padding-right 10px
          cursor pointer
      .right
        width 190px
        /*float left*/
        margin-left 20px
      .el-icon-plus,.icon-shuaxin,.icon-daoru,.icon-daochu1
        color $c-main
        font-size 14px
        margin-right 2px
    .pull-right
      float right
    .btn-wrap
      padding-bottom 10px
      overflow hidden
      .temp-download
        float left
        a
         color #fff
      .temp-upload
       float left
       display inline-block
       margin-left 20px
      .temp-upload-btn
        font-size 12px
        padding 8px 15px
</style>
<style lang='stylus'>
  .operate-div
   .el-input__icon
     line-height 0px
</style>



















